<template>
  <div class="home" ref="homeRef">
    <div class="header app-header">
      <van-search
        placeholder="请输入搜索关键词"
        input-align="center"
        shape="round"
        disabled
        @click="onSearch"
      />
    </div>
    <div class="swiper">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="information in informations"
          :key="information.id"
        >
          <van-image
            :src="information.img"
            :alt="information.name"
            fit="cover"
            @click="onClickImage(information.articleId)"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tab">
      <van-tabs
        v-model:active="tabActive"
        color="#1c8cfc"
        sticky
        animated
        swipeable
        offset-top="14.3vw"
        @change="onChangeTab"
        :before-change="onBeforeChangeTab"
      >
        <van-tab
          :title="category.name"
          v-for="category in categorys"
          :key="category.id"
          :name="category.id"
        >
          <product-list
            :method="'category'"
            :category-id="categoryId"
            :is-immediate="true"
          />
        </van-tab>
      </van-tabs>
    </div>
    <van-button
      icon="back-top"
      round
      class="backBtn"
      v-if="y >= 300"
      @click="onBackTop"
    />
  </div>
</template>

<script setup lang="ts">
import { getCategorys } from '../../../service/category'
import { categorysRes } from '../../../service/category/types'
import { getInformation } from '../../../service/information'
import { informationRes } from '../../../service/information/types'
import ProductList from '../../../components/product-list.vue'
import { useScroll } from '@vueuse/core'

interface scrollPos {
  id: number
  position: number
}

const router = useRouter()
const homeRef = ref<HTMLElement | null>(null)
const { y } = useScroll(homeRef)
const tabActive = ref<number>(0)
const informations = ref<informationRes.Information[]>([])
const categorys = ref<categorysRes.Category[]>([])
const categoryId = ref<number>(0)
const scrollPosition = reactive<scrollPos[]>([])

const onClickImage = (articleId: number) => {
  router.push(`/article/${articleId}`)
}
const onSearch = () => {
  router.push('/search')
}
const onBackTop = () => {
  homeRef.value?.scrollTo(0, 0)
}
const onBeforeChangeTab = () => {
  const beforeTab = scrollPosition.find((item) => item.id === tabActive.value)
  if (beforeTab?.id) beforeTab['position'] = y.value
  return true
}
const onChangeTab = async (id: number) => {
  categoryId.value = id
  const scroll = scrollPosition.find((item) => item.id === tabActive.value)
  if (scroll?.id) {
    setTimeout(() => {
      if (homeRef.value) homeRef.value.scrollTop = scroll.position
    }, 5)
  }
}
const loadInformation = async () => {
  const res = await getInformation()
  informations.value = res.data.informations
}
const loadCategorys = async () => {
  const res = await getCategorys()
  categorys.value = res.data.categorys
  categorys.value.unshift({
    name: '最新发布',
    id: -1,
    createTime: new Date(),
    updateTime: new Date()
  })
  categorys.value.forEach((item) => {
    scrollPosition.push({
      id: item.id,
      position: 0
    })
  })
}

onMounted(() => {
  loadInformation()
  loadCategorys()
})
onActivated(() => {
  if (homeRef.value) {
    homeRef.value.scrollTop = y.value
  }
})
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  padding-top: 54px;
  .swiper {
    height: 140px;
    background-color: #fff;
    .van-swipe {
      height: 100%;
      margin: 0 10px;
      border-radius: 10px;
      .van-image {
        height: 100%;
        width: 100%;
      }
    }
  }
  .tab {
    flex: 1;
    .van-tabs {
      height: 100%;
      :deep(.van-tabs__content) {
        height: calc(100% - 44px);
        .van-tab__panel {
          height: 100%;
        }
      }
    }
  }
  .backBtn {
    height: 44px;
    width: 44px;
    position: fixed;
    bottom: 100px;
    right: 10px;
    z-index: 99;
  }
}
</style>
